<template>
  <span v-html="icon" :class="className"></span>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    icon () {
      return require(`!raw-loader!svgo-loader?{plugins:[{removeViewBox:false}]}!../../assets/svg-icons/${this.name}.svg`).default
    },
    className () {
      return `svg-icon svg-icon--${this.name}`
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  /deep/ svg {
    fill: currentColor;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    overflow: hidden;
  }
}
</style>
